<template>
  <div>
    <div class="DIS">
      <div class="left">
        <el-input style="margin-top:-15px;left: 400px" class="serchContent"n @blur="searchContentHandler" v-model="searchContent" placeholder="请输入搜索内容" prefix-icon="el-icon-search"></el-input>
        <el-button  class="serch" type="primary"  icon="el-icon-search" @click="searchStudent">搜索</el-button>
      </div>
      <div style="margin-top:-55px">
        <el-button type="primary" icon="el-icon-plus" @click="createCorPop">添加</el-button>
      </div>
    </div>
    <div class="tableStu">
      <el-popover
        placement="right"
        ref="popverRef"
        trigger="click">
        <div style="height: 30px;display:inline;">
          <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学生id
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年级
          </h3>
        </div>
        <div>
          <el-input v-model="thisId" placeholder="学生id" style="width: 200px" disabled></el-input>
          <el-input v-model="thisName" placeholder="姓名" style="width: 200px" ></el-input>
          <el-select class="" v-model="thisGender" >
            <el-option
              v-for="item in eGender"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="thisAge" placeholder="年龄" style="width: 200px"></el-input>
          <el-select class="" v-model="thisLevel" >
            <el-option
              v-for="item in eLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <el-button type="success" round @click="updatePop">保存</el-button>
          <el-button type="primary" round @click="closePop">关闭</el-button>
        </div>
      </el-popover>



      <el-popover
        placement="right"
        ref="createCorPopoverRef"
        trigger="click">
        <div>
          <el-input v-model="createCor.name" placeholder="课程名" style="width: 120px" ></el-input>
          <el-select class="" v-model="createCor.level" style="width: 120px" >
            <el-option
              v-for="item in eLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="createCor.date_class" placeholder="上课时间" style="width: 120px" ></el-input>
          <el-input v-model="createCor.time_class" placeholder="课程时长" style="width: 120px" ></el-input>
          <el-input v-model="createCor.loc" placeholder="上课地点" style="width: 120px" ></el-input>
          <el-input v-model="createCor.info" placeholder="课程信息" style="width: 170px" ></el-input>
          <el-select v-model="createCor.tname" style="width: 120px" >
            <el-option
              v-for="item in eTeacher"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="createCor.max_num" placeholder="最大容纳人数" style="width: 120px" ></el-input>
          <el-button type="success" round @click="createNewPop">创 建</el-button>
          <el-button type="primary" round @click="closeNewPop">关 闭</el-button>
        </div>
      </el-popover>



      <el-table
        :data="tableData"
        height="600px"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="课程id"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="level"
          label="年级"
          width="100">
        </el-table-column>
        <el-table-column
          prop="date_class"
          label="上课时间"
          width="100">
        </el-table-column>
        <el-table-column
          prop="time_class"
          label="课程时长"
          width="100">
        </el-table-column>
        <el-table-column
          prop="loc"
          label="上课地点"
          width="100">
        </el-table-column>
        <el-table-column
          prop="tname"
          label="任课教师"
          width="100">
        </el-table-column>
        <el-table-column
          prop="info"
          label="课程信息"
          width="200">
        </el-table-column>
        <el-table-column
          prop="max_num"
          label="最大容纳人数"
          width="100">
        </el-table-column>
        <el-table-column
          prop="now_num"
          label="目前课程人数"
          width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="update(scope.$index,scope.row)" ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  methods: {
    createCorPop(){
      this.$refs.createCorPopoverRef.doShow();
    },

    action() {
      let _this = this
      let responseData=[]
      this.$axios({
        method: 'GET',
        url: 'http://localhost/course/findAll',

      }).then(response => {

        let user = response.data
        for (let i of user) {
          responseData.push(i)

        }

        _this.tableData=responseData

      })

      _this.$axios({
        method: 'GET',
        url: 'http://localhost/teacher/findAll',
      }).then(result => {
        let user=result.data;
        let teacher=[]
        for(let i of user)
        {

          _this.teacher.value=i.name;
          _this.teacher.label=i.name;
          _this.eTeacher.push(_this.teacher);
          _this.teacher=''
        }
        alert(this.eTeacher)
      })


    },


    handleDelete(index,row) { //删除行数
      let _this=this
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$axios({
          method:'GET',
          url:'http://localhost/course/deleteById/'+row.id

        }).then(response=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            _this.action()


        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  },




  mounted() {
    this.action()
  },
  data() {
    return {
      teacher:{
        value: '',
        label: ''
      },
      createUser: {
        username: '',
        password: '',
        name: '',
        age: '',
        gender: '',
        level: '',
        status: 'student',
        del: 0,
        id: '',
      },
      createCor: {
        name: '',
        level: '',
        date_class:'',
        time_class:'',
        loc:'',
        info:'',
        tid:'',
        max_num:'',
        tname:'',
      },


      tableData: [],


      eTeacher:[],

      eLevel: [{
        value: '小学',
        label: '小学'
      },
        {
          value: '初中',
          label: '初中'
        },
        {
          value: '高中',
          label: '高中'
        },
        {
          value: '大学',
          label: '大学'
        }],
    }
  },


}
</script>

<style scoped>

.tableStu {
  position: absolute;
  height: 70%;
  width: 85.8%
}

.DIS {
  display: flex;
  height: 50px;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: row;
  height: 40px;
}

.serch {
  position: relative;
  top:5px;
  left: 400px;
  margin-left: 20px;
}

.serchContent {
  position: relative;
  top:-40px;
  margin-left: 20px;
}

.add {
  position: relative;
  top: -55px;
  left: 730px;
}

.tableStu {
  position: absolute;
  height: 70%;
  width: 85.8%
}
.DIS {
  display: flex;
  height: 50px;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: row;
  height: 40px;
}
</style>
